<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchData" class="ele-form-search">
      <el-form-item>
        <el-input v-model="searchData.name" placeholder="名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchData.rssi" placeholder="临界值" type="number" clearable>
          <template slot="prepend">信号小于</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="searchData.timetran" :true-label="1" :false-label="0" border>末次采集时间超过1天</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button class="ele-btn-icon" icon="el-icon-search" type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      stripe
      :data="devicesFilter"
      :height="height"
    >
      <el-table-column
        label="编号"
        width="80"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="设备类型"
        prop="product.product_type.txt"
        align="center"
      />
      <el-table-column
        label="名称"
        prop="name"
        align="center"
      />
      <el-table-column
        label="序列号"
        prop="serialno"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="信号"
        prop="rssi"
        align="center"
        sortable
      />
      <el-table-column
        label="是否显示"
        prop="status"
        align="center"
      >
        <template #default="{row}">
          <el-tag v-if="+(row.map_show) === 1" type="success">显示</el-tag>
          <el-tag v-else type="danger">不显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="最后通信时间"
        prop="datatime"
        align="center"
        sortable
        show-overflow-tooltip
      >
        <template #default="scope">
          <span :class="getDatatimeClass(scope.row)">{{ scope.row.states.datatime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="160"
      >
        <template slot-scope="scope">
          <el-link type="primary" icon="el-icon-edit" class="mr12" @click="edit(scope.row)">修改</el-link>
          <template v-if="+scope.row.product_type === +dclassCodeMap.pg">
            <el-link type="success" icon="el-icon-setting" @click="set(scope.row)">参数设置</el-link>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { parseTime, getDateDiff, deepClone } from '@/utils'
import { dclassCodeMap } from '@/utils/constant'
export default {
  data() {
    return {
      dclassCodeMap,
      searchData: {
        name: '',
        rssi: '',
        timetran: 0
      },
      height: 'calc(100vh - 168px)'
    }
  },
  computed: {
    ...mapGetters(['devices']),
    devicesFilter() {
      let res = deepClone(this.devices.filter((val) => {
        return +val.product_type !== dclassCodeMap.fm
      }).map((val) => {
        val.rssi = (val.states && val.states.rssi && +val.states.rssi) || ''
        val.datatime = (val.states && val.states.datatime) || ''
        return val
      }))
      if (this.searchData.name) {
        res = res.filter((val) => {
          return val.name.indexOf(this.searchData.name) > -1
        })
      }
      if (this.searchData.timetran) {
        const now = parseTime(new Date().getTime())
        res = res.filter((val) => {
          const datatime = val.states && val.states.datatime
          return datatime && getDateDiff(datatime, now, 'hour') > 24
        })
      }
      if (this.searchData.rssi) {
        res = res.filter((val) => {
          const rssi = (val.states && val.states.rssi) || ''
          if (rssi) {
            return +val.product_type === dclassCodeMap.fkq && (+rssi < +this.searchData.rssi)
          } else {
            return +val.product_type === dclassCodeMap.fkq
          }
          // return true
        })
      }
      return res
    }
  },
  methods: {
    search() {
      console.log(this.searchData)
    },
    edit(row) {
      this.$emit('edit', row)
    },
    set(row) {
      this.$emit('set', row)
    },
    changeCurrentPage(val) {
      this.$emit('changeCurrentPage', val)
    },
    changePagesize(val) {
      this.$emit('changePagesize', val)
    },
    getDatatimeClass(row) {
      const now = parseTime(new Date().getTime())
      if (row.states && row.states.datatime) {
        const datatime = row.states && row.states.datatime
        if (getDateDiff(datatime, now, 'hour') > 24) {
          return 'color-danger'
        }
      }
      return 'color-info'
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

